<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

		<style>
			.search-form {
			    position: relative;
			    width: 300px;
			    margin: 0 auto;
			}
			
			input, button {
			    border: none;
			    outline: none;
			}
			
			input {
			    width: 100%;
			    height: 42px;
			    padding-left: 13px;
			}
			
			button {
			    height: 42px;
			    width: 42px;
			    cursor: pointer;
			    position: absolute;
			}
			/*搜索框3*/
			.bar3 {background: #F9F0DA;}
			.bar3 .search-form {background: #A3D0C3;}
			.bar3 input, .bar3 button {
			    background: transparent;
			}
			.bar3 button {
			    top: 0;
			    right: 0;
			}
			.bar3 button:before {
			    content: "\f002";
			    font-family: FontAwesome;
			    font-size: 16px;
			    color: #F9F0DA;
			}
		</style>
	</head>
	<body>
		<div class="bar3">
			<form class="search-form">
				<input type="text" placeholder="请输入您要搜索的内容...">
				<button type="submit"></button>
			</form>
		</div>
	</body>
</html>
